<template>
    <view class="box">
        <view class="amount">￥{{ count }}</view>
        <view class="balance">辻粤味余额 {{ count }} 元</view>
        <view class="account">
            <view>充值账户</view>
            <view>{{ nickName }}</view>
        </view>
        <view class="account">
            <!-- <view>订单编号</view>
      <view>1590546854392406017</view> -->
        </view>
        <view class="pay">
            <view>
                <image class="img" src="../../../static/weixin.png"></image>
            </view>
            微信支付
        </view>

        <view class="confirm buttonTopUp" @click="pay">确认支付</view>
    </view>
</template>
<script>
    export default {
        data() {
            return {
                count: "",
                nickName: uni.getStorageSync("nickName"),
                activity_id: "",
            };
        },

        methods: {
            pay() {
                uni.request({
                    url: "https://admin.example.com/index.php/user/prepay",
                    method: "POST",
                    data: {
                        user_id: uni.getStorageSync("userId"),
                        // activity_id: "1590546854392406017", //  双十一辻粤味
                        activity_id: this.activity_id, //  新商户辻粤味
                        amount: this.count * 100,
                        openid: uni.getStorageSync("openId"),
                    },
                    success(res) {
                        console.log(res.data.data);
                        res = res.data.data;
                        uni.requestPayment({
                            nonceStr: res.nonceStr,
                            package: res.package,
                            signType: res.signType,
                            paySign: res.paySign,
                            timeStamp: res.timeStamp,
                            success(res) {
                                console.log(res);
                                uni.showToast({
                                    title: "支付成功!",
                                });
                                uni.navigateTo({
                                    url: "results",
                                });
                            },
                        });
                    },
                });
            },
        },
        onLoad({
            count,
            activity_id
        }) {
            this.count = count;
            this.activity_id = activity_id;
        },
    };
</script>
<style>
    .box {
        margin: 50rpx;
        position: relative;
    }

    .amount {
        display: flex;
        justify-content: center;
        font-size: 70rpx;
        font-weight: 700;
    }

    .balance {
        margin: 20rpx 0 0 0;
        display: flex;
        justify-content: center;
        font-size: 30rpx;
        color: #a6a4a4;
    }

    .account {
        padding: 25rpx;
        display: flex;
        margin: 20 50rpx;
        justify-content: space-between;
        font-size: 30rpx;
    }

    .pay {
        background-color: #fff;
        border: 1px solid #bcbaba;
        width: 100%;
        height: 130rpx;
        display: flex;
        justify-content: start;
        align-items: center;
    }

    .img {
        width: 60px;
        height: 50px;
        margin: 5px 5px 0 10px;
    }

    .buttonTopUp {
        background-color: #fbeb60;
        font-size: 32rpx;
        height: 50px;
        width: 185px;
        bottom: -120%;
        left: 22%;
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 8rpx;
    }
</style>